import React from 'react';
import { Order } from '../../pouch/models/Order';
import EChartsReact from 'echarts-for-react';
import { useTranslation } from 'react-i18next';

export default function OrderStatePieChart(props: {orders: Order[]}) {
	const {t} = useTranslation();

	const aggregate: Record<string, number> = {};

	props.orders.forEach(x => {
		aggregate[x.state.toString()] = 1 + (aggregate[x.state.toString()] || 0);
	});

	const data = Object.keys(aggregate).map(key => {
		return {
			name: t(`option-order-${key}`),
			value: aggregate[key]
		}
	});

	const options = {
		title: {
			text: t('title-order-state'),
			left: 'center'
		},
		tooltip: {
			trigger: 'item'
		},
		legend: {
			orient: 'vertical',
			left: 'left',
		},
		series: [
			{
				name: t('table-header-state'),
				type: 'pie',
				radius: '50%',
				data: data,
				emphasis: {
					itemStyle: {
						shadowBlur: 10,
						shadowOffsetX: 0,
						shadowColor: 'rgba(0, 0, 0, 0.5)'
					}
				}
			}
		]
	};

	return <EChartsReact option={options} />;
}
